<template>
  <div class="aca_header">
    <a-row type="flex" align="middle">
      <a-col :xl="3" :lg="4" :md="5" :sm="7" :xs="10">
        <img src="../assets/img/icon-longlogo.png" 
             alt=""
             class="logo">
      </a-col>
      <a-col :xl="19" :lg="17" :md="16" :sm="14" :xs="10">
        <a-row>
          <a-menu :default-selected-keys="['1']"
                  mode="horizontal"
                  class="aca_menu">
            <a-menu-item key="1" @click="changeMenu('/homePage')">首页</a-menu-item>
            <a-sub-menu key="2">
              <template #title>课程</template>
              <a-menu-item @click="changeMenu('/course/courseList')">课程列表</a-menu-item>
              <a-menu-item @click="changeMenu('/course/courseProgress')">课程进度</a-menu-item>
              <a-menu-item>教师介绍</a-menu-item>
              <a-menu-item>健康测试</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="3">
              <template #title>知识</template>
              <a-menu-item @click="changeMenu('/knowledge/recommendArticle')">精选文章</a-menu-item>
              <a-menu-item>我的喜欢</a-menu-item>
              <a-menu-item>我的收藏</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="4">
              <template #title>问答</template>
              <a-menu-item>健康问答</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="5">
              <template #title>管理</template>
              <a-menu-item @click="changeMenu('/manage/healthyArchive')">健康档案</a-menu-item>
              <a-menu-item>健康图表</a-menu-item>
              <a-menu-item>添加档案</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="6">
              <template #title>推荐</template>
              <a-menu-item>商品分类页</a-menu-item>
              <a-menu-item>购物车</a-menu-item>
              <a-menu-item>商品收藏</a-menu-item>
            </a-sub-menu>
            <a-menu-item key="7">APP</a-menu-item>
          </a-menu>
        </a-row>
      </a-col>
      <a-col :xl="2" :lg="3" :md="3" :sm="3" :xs="4">
        <a-avatar :size="48"
                  class="green">
          <template>
            <a-dropdown>
              <a class="ant-dropdown-link white" @click.prevent>USER</a>
              <template #overlay>
                <a-menu>
                  <!-- <a-menu-item @click="changeMenu('/user')">我的主页</a-menu-item> -->
                  <a-menu-item key="1" @click="visible=true">我的主页</a-menu-item>
                  <a-menu-item>退出</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-avatar>
        <a-drawer title="个人信息"
                  :visible.sync="visible"
                  maskClosable
                  @close="handleClose"
                  width="40%">
          <a-descriptions bordered>
            <a-descriptions-item label="用户名">user8</a-descriptions-item>
            <a-descriptions-item label="昵称">新用户</a-descriptions-item>
            <a-descriptions-item label="真实姓名">gege</a-descriptions-item>
            <a-descriptions-item label="电话">empty</a-descriptions-item>
            <a-descriptions-item label="邮箱">12345678@qq.com</a-descriptions-item>
            <a-descriptions-item label="账户余额">default</a-descriptions-item>
          </a-descriptions>
          <a-row>
            <a-col :span="24" style="text-align: right;margin-top: 15px">
              <a-button class="bg_green white">修改信息</a-button>
            </a-col>
          </a-row>
        </a-drawer>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    changeMenu(route) {
      console.log(route)
      this.$router.push(route)
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.aca_header {
  .logo {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 100%;
    height: auto;
  }

  .aca_menu {
    line-height: 50px;
    margin-top: 5px;
    border-bottom: none;
    background-color: transparent;
  }
}

.ant-avatar {
  background:#5DA58A
}
</style>